<template>
    <a-modal
    :title="null"
    :visible="visible"
    :closable="false"
    :footer="null"
    :destroyOnClose="true"
    :bodyStyle="bodyStyle"
    dialogClass="form-preview-dialog ant-modal ant-modal-confirm dialog "
    @cancel="handleCancel"
    :width="previewWidth"
  >
    <span class="close-icon">
      <span class="icon-wrap" @click="handleCancel">
        <a-icon type="close-circle" />
      </span>
    </span>
    <img src="../../../assets/images/phone.png" width="400px" />
    <div class="form-content form-detail-content" style="padding: 10px" v-html="content">
    </div>
  </a-modal>
</template>
<script>
export default {
    name:'phonePreview',
    data() {
        return{
            visible:false,
            previewWidth: 850,
            bodyStyle: {
                maxHeight: '800px',
                overflow: 'auto',
                padding: 0,
                textAlign: 'center'
            },
            content:'',
        }
    },
    methods: {
        handleCancel() {
            this.visible = false
        },
        preview(content) {
            this.visible = true;
            this.content = content;
        }
    }
}
</script>
<style scoped>
.close-icon{
    left:680px
}
.form-detail-content {
  height: 510px;
  background-color: #fff;
  overflow-y: auto;
}
.form-content {
  position: absolute;
  width: 40%;
  max-height: 510px;
  top: 130px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
</style>